<template>
  <main>
    <x-header :left-options="{backText : ''}">申请入会
      <div slot="overwrite-left" @click="goBack" class="goBack"></div>
    </x-header>
    <!--员工信息 start-->
    <userInfo></userInfo>
    <!--员工信息 end-->
    <section>
      <!-- 公会条款 -->
      <div class="content-info">
        <p text-center class="title">公会条款:</p>
        <p class="title-two">1.工会申请要求:</p>
        <p class="text-indent">无印良品（上海）商业有限公司正式员工</p>
        <p class="title-two">2.工会申请加入时间:</p>
        <p class="text-indent">入职满三个月后即可申请加入工会；次月起开始扣除工会费用后，正式加入工会</p>
        <p class="title-two">3.工会成员可享受的经费标准：（人民币）:</p>
        <p class="text-indent">(1)结婚礼金：500元</p>
        <p class="text-indent">(2)生育礼金：500元</p>
        <p class="text-indent">(3)员工生日：100元</p>
        <p class="text-indent">(4)住院慰问金：本人标准：300元；直系亲属：200元</p>
        <p class="text-indent">(5)丧亡慰问金：本人标准：300-1000元；直系亲属：200元</p>
        <p class="text-indent">(6)工伤慰问金：300-800元</p>
        <p class="text-indent">(7)重大节日：200元</p>
        <p class="text-indent">备注：直系亲属包括员工的配偶、父母及子女。经费标准详情参见《工会规章-工会经费使用管理办法》</p>
        <p class="title-two">4.工会会费缴纳:</p>
        <p class="text-indent">工会会员（职工）按照规定每月缴交会费统一为5元/人；此款项将直接从工会会员每月的工资中扣除。</p>
        <p class="title-two">5.其他规章制度，详见“工会规章”板块。未尽事宜，依上级工会规定或无印良品（上海）商业有限公司工会另行规定。</p>
      </div>
      <!-- 公会条款 end-->
    </section>
    <section>
      <check-icon class="agree" :value.sync="isAgree">我已详细阅读公会条款</check-icon>
    </section>
    <section class="submit">
      <x-button :disabled = !isAgree>申请加入</x-button>
    </section>
  </main>
</template>

<script>
import { CheckIcon } from 'vux'
import userInfo from '../components/userInfo.vue'
export default {
  components: {
    CheckIcon,
    userInfo
  },
  data () {
    // store 获取数据赋值
    let {userName, photo, userNmber, job, address, holiday, wait} = this.$store.state.userInfo
    // const userInfo = this.$store.state.userInfo
    return {
      userName, // 员工姓名
      photo, // 员工头像
      userNmber, // 工号
      job, // 职位
      address, // 店铺地址
      holiday, // 剩余假期
      wait, // 我的待办
      isAgree: false
    }
  },
  created () {
    console.log(this.$store.state.userInfo.photo)
  },
  methods: {
    goBack () {
      console.log(this.$router.go(-1))
    },
    change (val, label) {
      console.log('change', val, label)
    }
  }
}
</script>

<style lang="less" scoped>
main {
  height: 100%;
  background: @eee;
}
  .ximg-error::after {
    content: '\0024';
    height: 200px;
    width: 200px;
  }
  .content-info {
    p {
      font-size: 1.5rem;
    }
    text-align: left;
    padding: 16px;
    height: 25rem;
    overflow-y: scroll;
    .title {
      font-size: 1.7rem;
      font-weight: bold;
      text-align: center;
    }
    .title-two {
      font-size: 1.6rem;
      font-weight: bold;
    }
    .text-indent {
      text-indent: 1rem;
    }

  }
  .agree {
    padding-top: 2rem;
    font-size: 2rem;
    .weui-icon-success::before {
      color: red;
    }
  }
  .submit {
    padding-top: 2rem;
  }
  .weui-btn {
    width: 35%;
  }
  // disabled button
  .weui-btn_disabled.weui-btn_default {
    opacity: 0.6;
    color: #fff;
    background-color: #488aff;
  }
  .vux-check-icon /deep/ i.weui-icon-success::before {
    color: red;
  }
</style>
